<template>
    <div id="app" class="filter-page">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">新闻过滤</div>
                <div slot="right" class="complete-btn" @click="setFilter">完成</div>
            </page-bar>
        </scroll-fixed>
        <section>
            <p>请选择您想过滤的新闻</p>
            <ul class="news-list">
                <li class="news-item" v-for="item in grade" :key="item.id" v-if="item.isShow"
                    :class="{ active: item.isSelected }"  @click="selectGrade(item)">
                    <p>
                        <span v-if="item.id !== 0">{{ item.id }}</span>
                    </p>
                    <span class="vip-style" v-bind:class="{ normal: item.id === 0  }">
                        {{ item.grade }}
                    </span>
                    <div class="checkboxWrap">
                        <input type="checkbox" :value="item.id" :id="item.id" :checked="item.isSelected"/>
                        <label :for="item.id" @click="selectGrade(item)"></label>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";
export default {
    name: "filter_vue",
    components: {
        [scrollFixed.name]: scrollFixed,
        [pageBar.name]: pageBar
    },
    data() {
        return {
            grade: [
                {
                    id: 9,
                    grade: "vip 9",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 8,
                    grade: "vip 8",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 7,
                    grade: "vip 7",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 6,
                    grade: "vip 6",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 5,
                    grade: "vip 5",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 4,
                    grade: "vip 4",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 3,
                    grade: "vip 3",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 2,
                    grade: "vip 2",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 1,
                    grade: "vip 1",
                    isSelected: false,
                    isShow: false
                },
                {
                    id: 0,
                    grade: "普通",
                    isSelected: false,
                    isShow: false
                }
            ],
            arrSelected: [],
        };
    },
    created () {
        this.initPage();
    },
    methods: {
        initPage () {
            let member_info = JSON.parse(localStorage.getItem('member_info'));
            let level = member_info.level_id;
            for (let i=0; i<=level; i++) {
                for (let j=0; j<this.grade.length; j++) {
                    if (i === this.grade[j].id) {
                        this.grade[j].isShow = true;
                    }
                }
            }
            let show_level_ids = member_info.show_level_ids;
            if (!show_level_ids) {
                return false;
            }
            if (show_level_ids.length === 1) {
                for (let i=0; i<this.grade.length; i++) {
                    if (this.grade[i].id == show_level_ids) {
                        this.grade[i].isSelected = true;
                        break;
                    }
                }
            } else {
                let arrTemp = show_level_ids.split(',');
                for (let i=0; i<arrTemp.length; i++) {
                    for (let j=0; j<this.grade.length; j++) {
                        if (arrTemp[i] == this.grade[j].id) {
                            this.grade[j].isSelected = true;
                        }
                    }
                }
            }

        },

        selectGrade (item) {
            item.isSelected = item.isSelected ?  false : true;
        },

        setFilter () {
            this.arrSelected = [];
            this.grade.forEach(item => {
                if (item.isSelected) {
                    this.arrSelected.push(item.id);
                }
            });
            // if (this.arrSelected.length === 0) {
            //     this.$toast("请选择您想过滤的新闻");
            // }
            // if (this.arrSelected.length > 0) {
                this.$http.post('?ct=member_center&ac=add_show_levels', { levels: this.arrSelected.join(',') }).then(res => {
                    let data = res.data;
                    if (data.code == 0) {
                        this.getLatestData();
                        //this.$toast("设置成功");
                        window.location.href = this.$config.pages.myCenter;
                    } else {
                        this.$toast(data.msg);
                    }
                });
            // }
        },

        getLatestData () {
            this.$http.get('?ct=member_center&ac=index').then(res => {
                let data = res.data;
                if (data.code === 0) {
                    this.member_info = data.data;
                    localStorage.setItem('member_info', JSON.stringify(this.member_info));
                }
            })
        },
    }
};
</script>

<style lang="less">
.filter-page {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .page-bar-right {
        display: flex;
        align-items: center;
        padding: 0.4rem;
    }

    .complete-btn {
        font-size: 30px;
        color: #e64a19;
    }

    section {
        border-top: 1px solid #eee;
        padding: 20px 30px 0 30px;
        background-color: #f6f6f6;
        p {
            font-size: 28px;
            color: #666;
        }
    }

    .news-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        .news-item:nth-child(4n) {
            margin-right: 0 !important;
        }
    }
    .news-item {
        position: relative;
        margin-right: 16px;
        width: 160px;
        height: 248px;
        display: flex;
        flex-direction: column;
        padding-top: 36px;
        margin-bottom: 20px;
        align-items: center;
        background: #fff;
        border-radius: 10px;
        box-shadow: 2px 1px 2px 2px #dedede;
        &.active {
            box-shadow: 0 0 15px #eeb9a8;
        }
        p {
            display: inline-block;
            width: 52px;
            height: 50px;
            line-height: 45px;
            background: url(../assets/icon-vip2.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #8f5aef;
            font-family: "Avia";
            font-size: 33px;
            margin-bottom: 24px;
        }
        .vip-style {
            margin-bottom: 20px;
            font-size: 30px;
            color: #8f5aef;
            font-family: "PingFang SC";
        }
        .normal {
            color: #292929;
        }
    }
}

.checkboxWrap {
    position: relative;
    label {
        cursor: pointer;
        position: absolute;
        width: 35px;
        height: 35px;
        top: 0;
        left: -15px;
        background: #fff;
        border: 2px solid #c6c6c6;
        box-sizing: border-box;
        border-radius: 50%;
        &:after {
            content: "";
            position: absolute;
            width: 16px;
            height: 8px;
            background: transparent;
            top: 7px;
            left: 7px;
            border: 3px solid #fff;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            display: none;
        }
    }
    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked + label {
        background: #e64a19;
        border-color: #e64a19;
    }
    input[type="checkbox"]:checked + label:after {
        display: block;
    }
}
</style>


